<template>
    <div class="timeout">
        <center style="color:red" >为减轻系统压力，单位秒只用来测试，并且提醒的触发间隔为最小10分钟，且为10的倍数</center>
        <div class="col-xs-12 form-group " data-show="" style="margin-top: 20px;">
            <label class="col-xs-3 text-right">
                超时提醒时间
            </label>

            <div class="col-xs-8" style="padding-right: 15px;
                        padding-left: 15px; max-width:200px">
                <div class="inp-timeout">
                    <input v-model="data.minValue" type="text" class="form-control input-sm timeout" id="" name="timeout">
                </div>
                <div class="select-timeout">
                    <select class="form-control input-sm timeout" id="" v-model="data.minUnit">
                        <option value="秒">秒</option>
                        <option value="分钟">分钟</option>
                        <option value="小时">小时</option>
                        <option value="天">天</option>
                    </select>
                </div>

            </div>
        </div>

        <div class="col-xs-12 form-group " data-show="" style="">
            <label class="col-xs-3 text-right">
                超时提醒间隔
            </label>

            <div class="col-xs-8" style="padding-right: 15px;
                        padding-left: 15px; max-width:200px">
                <div class="inp-timeout">
                    <input v-model="data.stepValue" type="text" class="form-control input-sm timeout" id="timeout" name="timeout">
                </div>
                <div class="select-timeout">
                    <select class="form-control input-sm timeout" id="selectTime" v-model="data.stepUnit">
                        <option value="秒">秒</option>
                        <option value="分钟">分钟</option>
                        <option value="小时">小时</option>
                        <option value="天">天</option>
                    </select>
                </div>

            </div>
        </div>

        <div class="col-xs-12 form-group " data-show="">
            <label class="col-xs-3 text-right">
                最大超时提醒时间
            </label>

            <div class="col-xs-8" style="padding-right: 15px;
                        padding-left: 15px;">
                <div class="inp-timeout">
                    <input v-model="data.maxValue" type="text" class="form-control input-sm maxTimeout" id="maxTimeout" name="maxTimeout">
                </div>
                <div class="select-timeout">
                    <select class="form-control input-sm maxTimeout" id="selectMax" v-model="data.maxUnit">
                        <option value="秒">秒</option>
                        <option value="分钟">分钟</option>
                        <option value="小时">小时</option>
                        <option value="天">天</option>
                    </select>

                </div>

            </div>
        </div>
    </div>
</template>
<script>
    var component = {
        props:["data"],
        data(){
            return {}
        },
        created(){
            this.data = this.data || {};
            this.data.minValue = this.data.minValue || "0";
            this.data.stepValue = this.data.stepValue  || "0";
            this.data.maxValue = this.data.maxValue || "0";
            this.data.minUnit = this.data.minUnit || "小时";
            this.data.stepUnit = this.data.stepUnit || "小时";
            this.data.maxUnit = this.data.maxUnit || "小时";
        }
    }
</script>